<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
    <crudOperation :permission="permission">
      <el-button
        slot="left"
        class="filter-item"
        size="mini"
        type="primary"
        @click="crud.toDetail('jstGoodsDetail')"
      >
        新增
      </el-button>
      <el-button
        :disabled="crud.selections.length !== 1"
        class="filter-item"
        size="mini" slot="left"
        type="success"
        @click="crud.toDetail('jstGoodsDetail',crud.selections[0].id)"
      >
        修改
      </el-button>
      <el-button
        class="filter-item"
        size="mini" slot="right"
        type="success"
        @click="queryInventory(crud.selections[0].id)"
      >
        查看库存
      </el-button>
      <el-button
        class="filter-item"
        size="mini" slot="right"
        type="success"
        @click="querysales(crud.selections[0].id)"
      >
        查看销量
      </el-button>
      <el-button
        class="filter-item"
        size="mini" slot="right"
        type="success"
        @click="onnew"
      >
        产品上新
      </el-button>
      <!-- <el-button
              slot="right"
              class="filter-item"
              size="mini"
              type="danger"
              icon="el-icon-remove-outline"
              :loading="enable"
              @click="crud.enableOrDisable('DISABLE')"
              :disabled="crud.selections.length < 1"
              v-permission="permission.disable"
      >
        禁用
      </el-button>
      <el-button
              slot="right"
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-circle-check"
              :loading="able"
              :disabled="crud.selections.length < 1"
              @click="crud.enableOrDisable('ENABLE')"
              v-permission="permission.enable"
      >
        启用
      </el-button> -->
    </crudOperation>
      <div v-if="!crud.props.searchToggle">
        <el-form size="small" label-width="70px">
          <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="产品">
                <table-select
                :tableColumns="[{prop:'code',label:'商品编码',width:'100'},{prop:'name',label:'商品名称',width: '280'}]"
                labelKey="name"
                valueKey="id"
                :value.sync="query.ids"
                placeholder="请选择产品"
                url="/api/dropDown/jstGoodsList"
              ></table-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="内部编码">
                <el-input placeholder="请输入内部编码" v-model="query.skuId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="商家编码">
                <el-input placeholder="请输入商家编码" v-model="query.iId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="产品类型">
                <el-select v-model="query.type" style="width: 100%" clearable placeholder="请选择">
                  <el-option v-for="val in dict.t_jst_goods_type" :key="val.value" :label="val.label"
                             :value="val.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="产品等级">
                <el-select v-model="query.level" style="width: 100%" clearable placeholder="请选择">
                  <el-option v-for="val in dict.t_jst_goods_level" :key="val.value" :label="val.label" :value="val.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="供应商">
                <el-input v-model="query.supplierName" placeholder="请输入供应商"/>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="备注">
                <el-input placeholder="请输入备注" v-model="query.remark"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="成本价格">
                <el-input placeholder="请输入成本价格" v-model="query.costPrice"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="7天内销量">
                <el-input placeholder="请输入7天内销量" v-model="query.saleIn7"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="30天内销量">
                <el-input placeholder="请输入30天内销量" v-model="query.saleIn30"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="总销量">
                <el-input placeholder="请输入总销量" v-model="query.totalSale"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="状态">
                <el-select
                  v-model="query.status"
                  class="edit-input"
                  placeholder="请选择"
                  style="width: 100%"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in dict.common_status"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <rrOperation :crud="crud"/>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-dialog :close-on-click-modal="false" :before-close="cancelCU"  :visible.sync="flag" :title="title" class="dialogs">
        <el-form size="small" class="formClass" label-width="85px" >
          <el-row class="flex fow-reverse" >
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="产品">
                <table-select
                  :tableColumns="[{prop:'code',label:'商品编码',width:'100'},{prop:'name',label:'商品名称',width: '280'}]"
                  labelKey="name"
                  valueKey="id"
                  :value.sync="form.ids"
                  placeholder="请选择产品"
                  url="/api/dropDown/jstGoodsList"
                ></table-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="内部编码">
                <el-input placeholder="请输入内部编码" v-model="form.skuId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="商家编码">
                <el-input placeholder="请输入商家编码" v-model="form.iId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="产品类型">
                <el-select v-model="form.type" style="width: 100%" clearable placeholder="请选择">
                  <el-option v-for="val in dict.t_jst_goods_type" :key="val.value" :label="val.label"
                             :value="val.value"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="flex fow-reverse" >
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="产品等级">
                <el-select v-model="form.level" style="width: 100%" clearable placeholder="请选择">
                  <el-option v-for="val in dict.t_jst_goods_level" :key="val.value" :label="val.label" :value="val.value"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="首批大货">
                <el-input placeholder="请输入首批大货" v-model="form.firstBulk"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="拍照样品">
                <el-input placeholder="请输入拍照样品" v-model="form.photoSample"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="供应商">
                <el-input v-model="form.supplierName" placeholder="请输入供应商"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="flex fow-reverse" >
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-button class="filter-item" size="mini" type="primary" @click="changegoods">搜索</el-button>
              <el-button class="filter-item" plain size="mini" type="primary"
                         @click="resetQuery" >重置</el-button>
            </el-col>
          </el-row>
        </el-form>

<!--        <div>产品：-->
<!--          <table-select-->
<!--                :tableColumns="[{prop:'code',label:'商品编码',width:'100'},{prop:'name',label:'商品名称',width: '280'}]" labelKey="name" valueKey="id" :value.sync="ids" placeholder="请选择产品" url="/api/dropDown/jstGoodsList" style="width:70%;display: inline-block" @change="changegoods"/>-->
<!--        </div>-->
        <el-button size="mini" type="success" @click="getonnew" class="onnew">上新</el-button>
        <el-table ref="tableB" stripe border :data="newdata" size="small" class="tableb" height="calc(100%-55px)" :cell-style="{'text-align':'center'}">
          <el-table-column prop="iId" label="商家编码" width="100"/>
          <el-table-column prop="model" label="产品型号" width="100"/>
          <el-table-column prop="level" label="产品等级" width="100"/>
          <el-table-column prop="firstBulk" label="首批大货" width="100"/>
          <el-table-column prop="photoSample" label="拍照样品" width="100"/>
          <el-table-column prop="imageUrl" label="图片" width="300">
            <template slot-scope="scope" >
            <span v-if="scope.row.imageUrl">
              <el-image v-for="(item,i) in JSON.parse(scope.row.imageUrl)" :key="i" class="imgs" :src="item" :preview-src-list="JSON.parse(scope.row.imageUrl)"/>
            </span>
            <span v-else>无</span>
          </template>
          </el-table-column>
          <el-table-column v-for="(it, index) in channelNames" :key="index" :label="it.channelName" width="100">
            <template slot-scope="{row}">
              <el-checkbox v-if="!row.groundNewList[index].groundNewTime" v-model="row.groundNewList[index].isGroundNew" :checked="row.groundNewList[index].isGroundNew?true:false" :true-label="1"
                :false-label="0" @change="clickbox(row.groundNewList[index])"></el-checkbox>
            <div>{{ parseDate(row.groundNewList[index].groundNewTime) }}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[10, 20, 30, 40,50,100]"
              :page-size="size"
              style="margin-top: 20px;"
              class="fotter-left"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"/>
      </el-dialog>

      <!--表格渲染-->
      <right-click-menu @tableConfig="tableConfig" :options.sync="rightClickMenuConfig"></right-click-menu>
    <el-dialog title="表格配置"
               :visible.sync="tableConfigShow"
               width="60%">
      <j-table-column-config :columns.sync="currentHeader"  @tabSave="saveHead"/>
    </el-dialog>

      <el-table
        ref="table"
        stripe
        border
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @sort-change="sortTab"
        @selection-change="crud.selectionChangeHandler"
        @cell-dblclick="row=>crud.toDetail('jstGoodsDetail',row.id)"
        @header-dragend="changeColWidth"
        v-draghead="manyTableOption"
        :cell-style="{'text-align':'center'}" >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="序号"/>
        <el-table-column
          v-if="item.visible"
          v-for="(item, index) in header"
          :key="`col_${index}`"
          :prop="item.prop"
          :label="columnLabel(item)"
          :width="item.width + 'px'"
          :data-porp='item.prop'
          @contextmenu.native="showMenu"
          @header-dragend="changeColWidth"
          :fixed="item.fixed"
          :sortable="item.sortable?'custom':false"
          :sort-orders="['descending', 'ascending', null]"
          sort-change="sort"
        >
          <!-- 自定义渲染模版 -->
          <template slot-scope="scope">
            <!-- 当列key为 sort 时，渲染一个手柄icon -->
            <template >
              <span :class="{'blue':(scope.row['orderStatus']==='INVALID')}" v-if="item.type == 1" style="margin-left: 0px">
                  <span :class="{'red':(scope.row[`type`] === 2),'blue':(item.orderStatus==='INVALID')}">
                    {{scope.row[`${item.prop}`]}}
                  </span>
              </span>
              <span :class="{'blue':(scope.row['orderStatus']==='INVALID')}" v-else-if="item.type == 2" style="margin-left: 0px">{{ parseTime(scope.row[`${item.prop}`])}}</span>
              <span :class="{'blue':(scope.row['orderStatus']==='INVALID')}" v-else-if="item.type == 3" style="margin-left: 0px">
                <span :class="{'red':(scope.row[`type`] === 3)}">
                  {{ getDict(`this.dict.label.${item.dictionary}["${scope.row[item.prop]}"]`) }}
                </span>
              </span>
              <span v-else-if="item.type == 4" style="margin-left: 10px">
                <span v-if="item.prop == 'imageUrl'">
                    <span v-if="scope.row.imageUrl">
                      <el-image v-for="(item,i) in JSON.parse(scope.row.imageUrl)" :key="i" class="imgs" :src="item" :preview-src-list="JSON.parse(scope.row.imageUrl)"/>
                    </span>
                    <span v-else>无</span>
                </span>
              </span>
            </template>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="columns.visible('name')" prop="name" label="商品名称" width="100"/>
        <el-table-column v-if="columns.visible('skuId')" prop="skuId" label="内部编码" width="100"/>
        <el-table-column v-if="columns.visible('iId')" prop="iId" label="商家编码" width="100"/>
        <el-table-column v-if="columns.visible('code')" prop="code" label="商品编码" width="100"/>
        <el-table-column v-if="columns.visible('model')" prop="model" label="产品型号" width="100"/>
        <el-table-column v-if="columns.visible('imageUrl')" prop="imageUrl" label="图片" width="100">
          <template slot-scope="scope" >
            <span v-if="scope.row.imageUrl">
              <el-image v-for="(item,i) in JSON.parse(scope.row.imageUrl)" :key="i" class="imgs" :src="item" :preview-src-list="JSON.parse(scope.row.imageUrl)"/>
            </span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('level')" prop="level" label="产品等级" width="100"/>
        <el-table-column v-if="columns.visible('supplierName')" prop="supplierName" label="供应商" width="100"/>
        <el-table-column v-if="columns.visible('type')" prop="type" label="类型" width="100">
          <template slot-scope="scope">
            <span>{{ dict.label.t_jst_goods_type[scope.row.type] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('status')" prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <span>{{ dict.label.common_status[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="columns.visible('size')" prop="size" label="尺码范围" width="100"/>
        <el-table-column v-if="columns.visible('color')" prop="color" label="颜色规格" width="100">
        </el-table-column>
        <el-table-column v-if="columns.visible('firstBulk')" prop="firstBulk" label="首批大货" width="100"/>
        <el-table-column v-if="columns.visible('photoSample')" prop="photoSample" label="拍照样品" width="100"/>
        <el-table-column v-if="columns.visible('length')" prop="length" label="内长" width="100"/>
        <el-table-column v-if="columns.visible('material')" prop="material" label="材质" width="100"/>
        <el-table-column v-if="columns.visible('photoHighlight')" prop="photoHighlight" label="拍照视觉突出点" width="100"/>
        <el-table-column v-if="columns.visible('costPrice1')" prop="costPrice1" label="成本1" width="100"/>
        <el-table-column v-if="columns.visible('costPrice2')" prop="costPrice2" label="成本2" width="100"/>
        <el-table-column v-if="columns.visible('costPrice3')" prop="costPrice3" label="成本3" width="100"/>
        <el-table-column v-if="columns.visible('remark')" prop="remark" label="备注" width="100"/>
        <el-table-column v-permission="['admin','jstGoods:del','jstGoods:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                style="margin-left: -1px; margin-right: 2px"
                type="text"
                @click="delect(scope.row)"
                >删除
              </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudJstGoods from '@/api/erp/jstGoods'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { Image } from 'echarts/lib/util/graphic'
import { Checkbox } from 'element-ui'
import request from '@/utils/request'
import{manyTableMixin}from"../../../mixins/manyTableMixin";
import jTableColumnConfig from "@/components/jTableColumnConfig/jTableColumnConfig";
// crud交由presenter持有
const defaultCrud = CRUD({ title: '聚水潭商品档案', url: 'api/jstGoods', sort: 'id,desc', crudMethod: { ...crudJstGoods },
optShow: {
    add: false,
    edit: false,
    del: true,
    download: true,
    leadingIn: true,
    enable: true,
    disable: true,
  },})

const defaultForm = { id: null, skuId: null, code: null, name: null, type: null, model: null, level: null, supplierName: null, size: null, color: null, firstBulk: null, photoSample: null, merCode: null, length: null, width: null, height: null, material: null, photoHighlight: null, costPrice1: null, costPrice2: null, costPrice3: null, imageUrl: null, seq: null, status: null, remark: null, createUserId: null, createTime: null, updateUserId: null, updateTime: null }
export default {
  name: 'JstGoods',
  components: { pagination, crudOperation, rrOperation, udOperation, Image ,jTableColumnConfig},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud(),manyTableMixin],
  dicts:['t_jst_goods_type','common_status'],
  data() {
    return {
      flag:false,
      title:'产品上新情况',
      newdata:[],
      permission: {
        add: ['admin', 'jstGoods:add'],
        edit: ['admin', 'jstGoods:edit'],
        del: ['admin', 'jstGoods:del'],
        import: ['admin', 'jstGoods:import'],
        export: ['admin', 'jstGoods:export'],
        copy: ['admin', 'jstGoods:copy'],
        upload: ['admin', 'jstGoods:upload'],
        download: ['admin', 'jstGoods:download'],
        enable: ['admin', 'jstGoods:enable'],
        disable: ['admin', 'jstGoods:disable'],
      },
      rules: {
      },
      channelNames:[],
      onChange:[],
      groundNewList:[],
      ids:'',
      total:'',
      size:20,
      page:1,
      }
  },

  watch: {
  },
  methods: {
    queryInventory(id){
      // console.log(id,'gggggg777');
      this.$router.push({ path:`/jst/jstGoodsqueryInventory/${id}`})
    },
    querysales(id){
      this.$router.push({ path:`/jst/jstGoodsquerysales/${id}`})
    },
    onnew(){
      this.flag=true
      this.changegoods()
      // crudJstGoods.queryGroundNew().then(res=>{

      //   this.newdata=res.data.content
      // })
    },
    clickbox(val){
      if (!val.isGroundNew) {
        this.groundNewList = this.groundNewList.filter(item => !(item.channelId === val.channelId&&item.goodsId===val.goodsId));
      }else{
        this.groundNewList.push(val)
      }
    },
    getonnew(){
      crudJstGoods.groundNew({groundNewList:this.groundNewList}).then(res=>{
        if(res.status===200){
          this.$message({type: "success", message: res.msg})
          this.groundNewList=[]
          this.changegoods()
        }else{
          this.$message({type: "error", message: res.msg})
        }
      }).catch(err=>{
        this.$message({type: "error", message: err.msg})
      })
    },
    cancelCU(){
      this.flag=false
    },
    delect(row) {
      this.$confirm("即将删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          crudJstGoods.del([row.id]).then(response => {
            if (response.status == 200) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.crud.toQuery();
            } else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    changegoods(){
      this.flag=true
      const config={
          url: 'api/jstGoods/queryGroundNew',
          methods: 'get',
          params: {
            ids:this.form.ids,
            skuId:this.form.skuId,
            iId:this.form.iId,
            type:this.form.type,
            level:this.form.level,
            firstBulk:this.form.firstBulk,
            photoSample:this.form.photoSample,
            supplierName:this.form.supplierName,
            page:this.page,
            size:this.size,
            sort:'id desc'
          }
        }
        request(config).then(res=>{
          this.newdata=res.data.content
          this.total=res.data.totalElements
          if(res.data.content && res.data.content[0]){
            this.channelNames=res.data.content[0].groundNewList
          }
        })
    },
    handleSizeChange(val) {
      this.size = val
      this.changegoods()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val
      this.changegoods()
      console.log(`当前页: ${val}`);
    },
    resetQuery(){
      this.form.ids = '',
      this.form.skuId = '',
      this.form.iId = '',
      this.form.type = '',
      this.form.level = '',
      this.form.supplierName = ''
    },
    parseDate(time, cFormat) {
      console.log('time',time)
      if (arguments.length === 0) {
        return null
      }
      const format = cFormat || '{y}-{m}-{d}'
      let date
      if (typeof time === 'undefined' || time === null || time === 'null') {
        return ''
      } else if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
        console.log('date',date)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') {
          return ['日', '一', '二', '三', '四', '五', '六'][value]
        }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    },
    // 获取数据前设置好接口地址
    [CRUD.HOOK.afterRefresh](crud) {

      return true
    }, // 新增与编辑前做的操作
    [CRUD.HOOK.afterToCU](crud, form) {
    },

  }
}
</script>

<style scoped lang="scss">
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .imgs{
    // width: 50px;
    height: 70px;
    margin: 0 5px;
  }
  .onnew{
    float: right;
    margin-bottom: 20px;
  }
  .tableb{
    width: 100%;
    height: 500px;
    overflow-y: auto;
  }
  .dialogs{
    ::v-deep .el-dialog{
      margin-top: 3vh !important;
      width: 80%;
    }
    // ::v-deep .el-table th.el-table__cell.is-leaf{
    //   font-size: 14px !important;
    // }
    // ::v-deep .el-table td.el-table__cell div{
    //   font-size: 14px !important;
    // }
  }

  .center-table td{
    text-align: center !important;
  }
  .center-table th{
    text-align: center !important;
  }

</style>
